// pages/home/income-detail/chart/line.js
import * as echarts from '../../../../ec-canvas/echarts';

const that = Component({
    /**
     * 组件的属性列表
     */
    properties: {
        chartData: {
            type: Object,
            value: {},
            observer: 'updateChartData'
        },
    },

    /**
     * 组件的初始数据
     */
    data: {
        ec: {
            lazyLoad: true,
        },

        seriesData: {
            keys: [],
            values: [],
        }
    },

    ready: function () {
        // 获取组件
        this.ecComponent = this.selectComponent('#near-seven-data-chart');
        this.ecComponent.init((canvas, width, height) => {
            // 获取组件的 canvas、width、height 后的回调函数
            // 在这里初始化图表
            const chart = echarts.init(canvas, null, {
                width: width,
                height: height
            });
            this.setOption(chart);

            // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
            this.chart = chart;

            // 注意这里一定要返回 chart 实例，否则会影响事件处理等
            return chart;
        });
    },

    detached: function () {
        if (this.chart) {
            this.chart.dispose();
        }
    },

    /**
     * 组件的方法列表
     */
    methods: {
        setOption: function (chart) {
            var options = {
                title: {
                    left: 'center'
                },
                color: ["#FF2F92", "#67E0E3", "#9FE6B8"],
                legend: {
                    data: ['收益'],
                    top: 10,
                    left: 'center',
                    z: 100
                },
                grid: {
                    containLabel: true
                },

                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.data.seriesData.keys,
                    axisLabel: {
                        // rotate: 25,
                    },
                    // show: false
                },
                yAxis: {
                    x: 'center',
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            // type: 'dashed'
                        }
                    }
                    // show: false
                },
                series: [{
                    name: '收益',
                    type: 'line',
                    smooth: true,
                    data: this.data.seriesData.values
                }]
            };

            chart.setOption(options);
        },

        updateChartData: function (newVal, oldval) {
            var keys = [];
            var values = [];

            for (var i in newVal) {
                keys.push(i);
                values.push(newVal[i]);
            }

            this.setData({
                seriesData: {
                    keys: keys,
                    values: values
                }
            });

            if (this.chart) {
                this.chart.setOption({
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.data.seriesData.keys,
                        axisLabel: {
                            // rotate: 25,
                        },
                        show: true
                    },
                    series: [{
                        name: '收益',
                        type: 'line',
                        smooth: true,
                        data: this.data.seriesData.values
                    }]
                });
            }
        }
    }
})